/* top.css */
.top {
    width: 100%;
    height: 70px;
    /*background-color: #1b2838; !* 替换成 Steam 深色背景 *!*/
    display: flex;
    flex-direction: column;
    align-items: center; /* 垂直居中 */
    justify-content: space-between; /* 内容分散对齐 */

}
.index-top{
    width: 100%;
    height: 100%;
    background-color: #1b2838; /* 替换成 Steam 深色背景 */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.index-top>.leftSide{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    height: 100%;
    width: 20%;
    color: white; /* 文字白色 */

}
.shop{
    cursor: pointer;
}
.shop:hover{
    color: grey;
    transform: scale(1.1); /* 稍微放大，增强交互反馈 */
    transition: all 0.2s ease; /* 过渡效果更丝滑 */
}
.store{
    cursor: pointer;

}
.store:hover{
    color: grey;
    transform: scale(1.1); /* 稍微放大，增强交互反馈 */
    transition: all 0.2s ease; /* 过渡效果更丝滑 */
}
.id{
    cursor: pointer;
}
.id:hover{
    color: #fdfdfd;
    transform: scale(1.1); /* 稍微放大，增强交互反馈 */
    transition: all 0.2s ease; /* 过渡效果更丝滑 */
}
.setting{
    width: 100px;
    height: 60px;
    background-color: #1b2838;
    position: absolute;
    top: 22px;

}
.index-top>.rightSide{
    height: 100%;
    width: 35%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}


.rightSide>.login{
    margin-right: 5px;
    cursor: pointer; /* 鼠标悬浮变手型，暗示可点击 */
    background-color: #3b82f6;
}


.rightSide>.register{
    cursor: pointer;
    margin-right: 20px;
    background-color: #3b82f6;

}


.rightSide>.img{
    height: 40px;
    width: 40px;
}


